<template>
    <div id="container">
        <div id="title">
            认证审核
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <el-table
            :data="userList.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%"
            >
            <el-table-column
                label="ID"
                prop="id"
                >
            </el-table-column>
            <el-table-column
                label="用户名"
                prop="username"
               >
            </el-table-column>
            <el-table-column
                label="认证类型"
                prop="certification"
                width="400px">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.certification === '教师'?'success' : 'warning'">{{scope.row.certification}}认证</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                align="right"
                >
                <template slot="header" slot-scope="scope">
                    <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入用户名搜索"
                    id="search-input"/>
                </template>
                <template slot-scope="scope">
                   <el-button type="primary" @click="handleViewDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 认证信息详情弹框 -->
        <el-dialog title="认证详情" :visible.sync="dialogVisible">
            <div class="text-box">ID：<span>{{current.id}}</span></div>
            <div class="text-box">用户名：<span>{{current.username}}</span></div>
            <div class="text-box">真实姓名：<span>{{current.realname}}</span></div>
            <div class="text-box">申请成为：<span>{{current.certification}}</span></div>
            <div class="text-box">工作单位：<span>{{current.work}}</span></div>
            <div class="text-box">工作证件号码：<span>{{current.work_number}}</span></div>
            <div class="text-box">申请时间：<span>{{current.time}}</span></div>
            
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="handleCertificationPass">审核通过</el-button>
                <el-button type="danger" @click="handleCertificationFail">驳回申请</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'CertificationAudit',
    data(){
        return{
            // 按用户名搜索
            search:'',
            // 用户列表
            userList:[
                {
                    'id':2017115182,
                    'username':'zijeak',
                    'certification':'教师',
                    'realname':'田佳乐',
                    'url':''
                },
                {
                    'id':2017115183,
                    'username':'小青蛙',
                    'certification':'企业用户',
                    'realname':'李佩如',
                    'url':''
                }
            ],
            dialogVisible:false,
            // 保存临时状态信息
            current:''
        }
    },
    created:function(){
        this.getData();
    },
    methods:{
        async getData(){
            this.userList = [];
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.get('/api/admin/certification_list',headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.userList = res.data.res.data;
                }else{
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'error'
                    });
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        },
        handleViewDetail:function(row){
            this.dialogVisible = true;
            this.current = row;
        },
        handleCertificationPass:function(){
            this.commitCertification('pass');
            this.dialogVisible = false;
            this.$router.go(0);
        },
        handleCertificationFail:function(){
            this.commitCertification('fail');
            this.dialogVisible = false;
            this.$router.go(0);
        },
        commitCertification:async function(type){
            let post_data = {
                uid:this.current.id,
                target_role:this.current.target_role,
                type:type
            }
            console.log(post_data);
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.post('/api/admin/certification',post_data,headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'error'
                    });
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    background-color: #fff;
    #title{
        font-size: 20px;
        font-weight: bold;
    }
}
/deep/ .el-input__inner{
    width:30%;
}
/deep/ #search-input{
    width:100%;
}
.text-box{
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 10px;
}
</style>